前言
彈跳提示框有分兩種：
- 含羞草 tooltip
- 捕蠅草 popover
今天要講的是 tooltip ，它跟含羞草一樣，只要略有風吹草動，就算只是吹個氣（ hover ）就會迅速的觸發，想知道它是怎麼作用的嗎？那就繼續看下去吧。
（ 圖片來源 ）
官方網站的 Tooltips 頁面
在開始使用工具提示框之前，需要了解的事情
- 工具提示框需依靠第三方函式庫 Popper 進行定位。必須在 bootstrap.js 之前引入
popper.min.js或是使用已經包含 Popper 的bootstrap.bundle.min.js / bootstrap.bundle.js讓彈出提示框運作。 - 出於效能上的考量，工具提示框是選擇性加入的，因此必須自行初始化。
- 標題長度為零的工具提示將不會被顯示。
- 指定
container: 'body'以避免在更複雜的元件（ 像是 input 群組、按鈕群組等 ）中出現渲染問題。 - 隱藏元素上的工具提示將不會被觸發。
.disabled或disabled元素的工具提示必須在外層元素上被觸發。- 被跨越多行的超連結觸發時，工具提示框將居中。在你的
<a>連結上使用white-space: nowrap;來避免這種行為。 - 必須先隱藏工具提示框，然後才能從 DOM 中刪除相應的元素。
啟用工具提示框
其中一種在頁面上初始化所有工具提示的方法是透過它們的 data-bs-toggle 屬性，記得要放在 bootstrap.bundle.min.js 後面。
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
基本工具提示框
在 title 裡輸入標題，在 data-bs-placement 裡填上提示框顯示方向。
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
加入自定義 HTML
可以在 title 裡加入 HTML 碼。
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
禁用的元素
具有 disabled 的元素是不能產生互動的，這意味用戶不能使用 focus , hover 或點擊，觸發（ 彈出 ）工具提示。解決方法是從 <div> 或 <span> 等包裝元素觸發工具提示，且設定 tabindex="0" 使其可以被鍵盤 focus ，並在禁用的元素上設定 pointer-events 。
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
